<template>
  <div class="layout layout-100">
    <Layout class="layout-100">
      <Header class="header-cont">项目详情</Header>
      <Content class="content-cont">
        <Tabs value="1" @on-click="activeTab" >
          <TabPane label="基本信息" name="1"></TabPane>
          <TabPane label="管理信息" name="2"></TabPane>
        </Tabs>
        <Form ref="formData" :model="formData" label-position="top">
          <Row v-show="active == 1">
            <Col span="12">
              <FormItem label="项目全称">
                <Input style="width:350px;" v-model.trim="formData.name" disabled/>
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem label="项目简称" >
                <Input style="width:350px;" v-model.trim="formData.shortName" disabled/>
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem label="工程类型">
                <Input style="width:350px;" v-model.trim="formData.dictEngineeringTypeName" disabled/>
              </FormItem>
            </FormItem>
            </Col>
            <Col span="12">
            <FormItem label="项目类型">
              <Input style="width:350px;" v-model.trim="formData.projectTypeName"  disabled/>
            </FormItem>
            </Col>
            <Col span="12">
            <FormItem label="风险等级">
              <Input style="width:350px;" v-model.trim="formData.dictRiskGradeName" disabled/>
            </FormItem>
            </Col>
            <Col span="12">
            <FormItem label="施工状态">
              <Input style="width:350px;" v-model.trim="formData.dictConstructionStateName" disabled/>
            </FormItem>
            </Col>
            <Col span="12">
            <FormItem label="计划开工时间">
              <Input style="width:350px;" v-model.trim="formData.planedStartDate" disabled/>
            </FormItem>
            </Col>
            <Col span="12">
            <FormItem label="计划完工时间">
              <Input style="width:350px;" v-model.trim="formData.planedEndDate" disabled/>
            </FormItem>
            </Col>
            <Col span="24">
            <FormItem label="所在地区">
              <Input style="width:150px;margin-right:175px" v-model.trim="formData.provinceName" class="width50" disabled/>
              <Input style="width:150px;margin-right:175px" v-model.trim="formData.cityName" class="width50" disabled/>
              <Input style="width:150px;" v-model.trim="formData.districtName" class="width50" disabled/>
            </FormItem>
            </Col>
            <Col span="24">
            <FormItem label="详细地址">
              <Input style="width:950px;" v-model.trim="formData.address" disabled/>
            </FormItem>
            </Col>
            <Col span="24">
            <FormItem label="路线平面图">
              <Input style="width:950px;" v-model.trim="formData.fileInfo[0].name" disabled/>
              <span @click="download(formData.fileInfo[0].id)" class="button-class">下载文件</span>
            </FormItem>
            </Col>
            <Col span="24">
            <FormItem label="项目概述">
              <Input style="width:950px;" type="textarea" v-model.trim="formData.description" disabled/>
            </FormItem>
            </Col>
          </Row>
          <Row v-show="active == 2">
            <Col span="24">
            <FormItem label="项目经理">
              <Input style="width:450px;" v-model.trim="formData.projectManage.pmName" disabled/>
            </FormItem>
            </Col>
            <Col span="24">
            <FormItem label="联系电话">
              <Input style="width:450px;" v-model.trim="formData.projectManage.tel" disabled/>
            </FormItem>
            </Col>
            <Col span="24">
            <FormItem label="中标单位">
              <Input style="width:450px;" v-model.trim="formData.projectManage.winningEntName" disabled/>
            </FormItem>
            </Col>
            <Col span="24">
            <FormItem label="管理单位">
              <Input style="width:450px;" v-model.trim="formData.projectManage.manageEntName" disabled/>
            </FormItem>
            </Col>
          </Row>
        </Form>
      </Content>
    </Layout>
  </div>
</template>

<script>
  import { mapMutations } from 'vuex'
  export default {
    name: 'DetailProjectInquiry',
    data() {
      return {
        button:localStorage.getItem('buttonList'),
        typeList: [],
        formData: {
          name:'',
          wbsName:'',
          pmName:'',
          shortName:'',
          fileInfo:[
            {
              name:'',
              id:'',
            }

          ],
          projectManage:{

          }
        },
        proTypeList:[],
        active:1,
        uploadAction:process.env.VUE_APP_FILE_SERVER_URL+'file/downFile',
      }
    },
    methods: {
      ...mapMutations(['closeTag']),
      closetab() {
        /**
         * 如果是调用closeTag方法，普通的页面传入的对象参数只需要写name字段即可
         * 如果是动态路由和带参路由，需要传入query或params字段，用来区别关闭的是参数为多少的页面
         */
        this.closeTag({
          name: 'detail-project',
          params: {
            id: this.$route.params.id,
            name: this.$route.params.name,
            type: this.$route.params.type
          }
        })
      },
      activeTab(code){
        this.active = code;
      },
      //获取项目类型
      getProType () {
        let code = 'PROJECT_TYPE';
        this.$api.projectInquiry.getListByTypeCode(code).then((res) => {
          if(res.code == 200){
            this.proTypeList = res.data;
          } else {
            this.$Message.error(res.data.msg);
          }
        })
      },
      //详情
      getDetail(id) {
        this.$api.projectInquiry.getDetail(id).then(res => {
          if (res.code === 200) {
            this.formData= res.data
            this.formData.planedStartDate = this.$time(new Date(this.formData.planedStartDate), 'yyyy-MM-dd');
            this.formData.planedEndDate = this.$time(new Date(this.formData.planedEndDate), 'yyyy-MM-dd')
          } else {
            this.$Message.error(res.message)
          }
        })
      },
      download(id){
        window.open(this.uploadAction+'/'+id);
      }
    },
    watch: {
      $route() {
        if (
          this.$route.params.type === 'editor' ||
          this.$route.params.type === 'details'
        ) {
          this.getDetail(this.$route.params.id)
        }
      }
    },
    mounted() {
      if (
        this.$route.params.type === 'editor' ||
        this.$route.params.type === 'details'
      ) {
        this.getDetail(this.$route.params.id);
        this.getProType();
      }
    }
  }
</script>

<style lang="scss">
  .width50 {
    width: 20%;
  }
</style>
